<template>
    <el-card>
        <el-table :data="AllMenu" style="width: 100%; margin-bottom: 20px" row-key="id" border>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="权限值" />
            <el-table-column prop="updateTime" label="修改时间" />
            <el-table-column align="center" label="操作" property="">
                <template #="{ row }">
                    <el-button type="primary" size="small" icon="Plus" @click="addMenu(row)"
                        :disabled="row.level == 3 ? true : false">{{ row.level == 3 ? '添加功能' : "添加菜单" }}</el-button>
                    <el-button type="primary" size="small" icon="Edit" @click="updateMenu(row)"
                        :disabled="row.level == 1 ? true : false">编辑</el-button>
                    <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" icon="Delete"
                        icon-color="#F56C6C" :title="`确定要删除角色${row.name}吗?`" @confirm="remove(row)">
                        <template #reference>
                            <el-button type="primary" size="small" icon="Delete"
                                :disabled="row.level == 1 ? true : false">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>

    </el-card>


    <!-- 新增与修改的弹窗 -->
    <el-dialog v-model="dialogVisible" :title="paramsMenu.id ? '修改菜单' : '添加菜单'" width="50%">
        <el-form>
            <el-form-item label="名称">
                <el-input placeholder="请你输入菜单名称" v-model="paramsMenu.name"></el-input>
            </el-form-item>
            <el-form-item label="权限值">
                <el-input placeholder="请你输入权限数值" v-model="paramsMenu.code"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

import { ref, onMounted, reactive } from 'vue'
//接口
import { reqAllMenu, reqAddOrUpdateMenu, reqDeleteMenu } from '@/api/acl/menu/index'
//菜单管理渲染的所有数据
let AllMenu = ref<any>()

//弹窗显示与隐藏的回调
let dialogVisible = ref<boolean>(false)


//携带的参数
let paramsMenu = reactive<any>({
    "code": "",
    "level": 0,
    "name": "",
    "pid": 0,
})
//钩子函数 进入页面直接执行 获取菜单数据
onMounted(() => {
    getMenu()
})
//请求的展示数据
const getMenu = async () => {
    let result: any = await reqAllMenu()
    if (result.code == 200) {
        AllMenu.value = result.data
    }
}

//添加菜单的回调
const addMenu = (row: any) => {
    Object.assign(paramsMenu, {
        id: 0,
        "code": "",
        "level": 0,
        "name": "",
        "pid": 0,
    })
    dialogVisible.value = true

    paramsMenu.level = row.level + 1
    paramsMenu.pid =(row.id as number) 
    

}
//更新菜单的回调
const updateMenu = (row: any) => {
    dialogVisible.value = true
    Object.assign(paramsMenu, row)
}






// 确定按钮的回调
const save = async () => {
    console.log(paramsMenu);
    let result:any = await reqAddOrUpdateMenu(paramsMenu)
    if (result.code == 200) {
        dialogVisible.value = false
        ElMessage({
            showClose: true,
            message: paramsMenu.id ? '更新成功!' : '新增成功!',
            type: 'success',
        })
        getMenu()

    } else {
        dialogVisible.value = false
        ElMessage({
            showClose: true,
            message: paramsMenu.id ? '更新失败!' : '新增是白1!',
            type: 'info',
        })
    }
    console.log(result);

}
//删除菜单按钮的回调
const remove = async (row: any) => {
    let result: any = await reqDeleteMenu(row.id)
    if (result.code == 200) {
        getMenu()

        ElMessage({
            showClose: true,
            message: '删除成功!',
            type: 'success',
        })

    } else {
        ElMessage({
            showClose: true,
            message: '删除失败!',
            type: 'info',
        })
    }
}
</script>

<style lang="scss" scoped></style>